<template>
	<div class="list-content">
		<el-row type="flex" justify="space-between">
			<el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
				<el-form-item>
					<el-date-picker v-model="formInline.time" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="util.intTimePickerOptions()" @change="getData(1)">
					</el-date-picker>
				</el-form-item>
				<!-- <el-form-item>
          <el-select filterable @change="getData(1)" v-model="formInline.status">
            <el-option label="公告状态" value="-1"></el-option>
            <el-option label="未开始" value="0"></el-option>
            <el-option label="公示中" value="1"></el-option>
            <el-option label="已结束" value="2"></el-option>
          </el-select>
        </el-form-item> -->
				<el-form-item>
					<el-input v-model.trim="formInline.name" placeholder="请输入内容" @keyup.enter.native="getData(1)" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button class="form-search-btn" type="primary" @click="getData(1)">查询</el-button>
				</el-form-item>
			</el-form>
			<div class="more-btns" v-if="($store.state.buttonPermission[$store.state.currentTabName]||'').indexOf('noticeManager') > -1">
				<el-button type="primary" @click="addNotice()">新增</el-button>
			</div>
		</el-row>
		<el-row class="overclick-wrap" :gutter="40" type="flex" justify="space-between">
			<span style="display:none;">{{ freashStaticFlag }}</span>
			<el-col :span="6">
				<div class="item-wrap" @click="formInline.status = '-1'" :class="formInline.status == '-1' ? 'active' : ''">
					<div class="item-content">
						<p class="item-value color-1">
							{{
                staticObj.unstartCount +
                  staticObj.startCount +
                  staticObj.endCount || 0
              }}
						</p>
						<p class="item-title">公告总数</p>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="item-wrap" @click="formInline.status = '0'" :class="formInline.status == 0 ? 'active' : ''">
					<div class="item-content">
						<p class="item-value color-2">{{ staticObj.unstartCount || 0 }}</p>
						<p class="item-title">未开始</p>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="item-wrap" @click="formInline.status = '1'" :class="formInline.status == 1 ? 'active' : ''">
					<div class="item-content">
						<p class="item-value color-4">{{ staticObj.startCount || 0 }}</p>
						<p class="item-title">公示中</p>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="item-wrap" @click="formInline.status = '2'" :class="formInline.status == 2 ? 'active' : ''">
					<div class="item-content">
						<p class="item-value color-3">{{ staticObj.endCount || 0 }}</p>
						<p class="item-title">已结束</p>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-table v-loading="loading" :data="tableData" ref="mainTable" style="width: 100%">
			<el-table-column label="序号" type="index" width="50"> </el-table-column>
			<el-table-column prop="thumbnailImg" label="首图" width="100">
				<!-- 图片的显示 -->
				<template slot-scope="scope">
					<img :src="
              scope.row.thumbnailImg
                ? scope.row.thumbnailImg.split(',')[0]
                : defaultImg
            " width="50" height="50" @click="$imgPreview" :data-imgpreview="scope.row.thumbnailImg" />
				</template>
			</el-table-column>
			<el-table-column prop="name" label="公告名称"> </el-table-column>
			<el-table-column label="开始日期">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.beginTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="结束日期">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.endTime }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createAccountName" label="创建人">
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template slot-scope="scope">
					<el-tag :type="util.transNoticeTagType(scope.row.status)" disable-transitions>{{ util.transNoticeText(scope.row.status) }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<!-- 1、只有未开始的公告才能编辑；
          2、只有未开始/未结束的公告才能提前结束 -->
					<el-button @click="showDetail(scope.$index, scope.row)" type="text" size="small">详情</el-button>
					<template v-if="($store.state.buttonPermission[$store.state.currentTabName]||'').indexOf('noticeManager') > -1">
						<span v-if="scope.row.status === 0" class="dividing-line">|</span>
						<el-button v-if="scope.row.status === 0" @click="addNotice(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
						<span v-if="scope.row.status !== 2" class="dividing-line">|</span>
						<el-button v-if="scope.row.status !== 2" @click="delNotice(scope.$index, scope.row)" type="text" size="small">提前结束</el-button>
					</template>
				</template>
			</el-table-column>
			<!-- 展开详情 -->
			<el-table-column type="expand" width="1">
				<template slot-scope="scope">
					<div class="detail-content">
						<template v-if="scope.row.contentType == 1">
							<p><b>详情图片：</b></p>
							<p v-show="scope.row.detailImg">
								<img v-for="(item, index) in scope.row.detailImg.split(',')" :key="index" :src="item" width="100" height="100" @click="$imgPreview" :data-imgpreview="scope.row.detailImg" :data-imgpreviewindex="index" />
							</p>
							<p v-show="!scope.row.detailImg">暂无图片</p>
						</template>
						<template v-else>
							<p><b>详情内容：</b></p>
							<div class="ql-snow">
								<p class="ql-editor" v-show="scope.row.content" v-html="scope.row.content"></p>
							</div>
							<p v-show="!scope.row.content">暂无数据</p>
						</template>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background @size-change="sizeChange" @current-change="pageChange" :current-page="formInline.currentPageIndex" :page-sizes="[10, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="formInline.currentPageTotal">
		</el-pagination>
		<el-dialog :close-on-click-modal="false" title="公告维护" width="700px" top="10vh" v-if="dialogFalg" :visible.sync="dialogFalg" @close="closeDialog" v-dialogDrag>
			<notice-form :editInfo="editInfo" :closeDialog="closeDialog"></notice-form>
		</el-dialog>
	</div>
</template>

<script>
import { getNoticeCount, getNoticeList, closeNoticeById } from '@/api/notice'
import util from '@/utils/util'
import NoticeForm from './Dialog/NoticeForm'

export default {
	name: 'NoticeMaintain',
	props: ['param'],
	components: {
		NoticeForm,
	},
	data() {
		return {
			freashStaticFlag: 0,
			formInline: {
				roleIds: '',
				name: '',
				status: '-1',
				orgId: this.$store.state.userinfo.org.id,
				time: '',
				currentPageSize: 10,
				currentPageIndex: 1,
				currentPageTotal: 0,
			},
			util: util,
			isMuilUnitUser: this.$store.state.userinfo.isMuilUnitUser,
			accountName: this.$store.state.userinfo.accountName,
			defaultImg: this.GLOBAL.defaultImg,
			tableData: [], //表格数据
			staticObj: {}, //头部各状态个数统计
			loading: false,
			dialogFalg: false,
			editInfo: {}, // 编辑对应的表单信息
		}
	},
	created: function () {
		this.getData()
	},
	methods: {
		getData(_pageIndex) {
			this.getList(_pageIndex)
			this.getStatis()
		},
		sizeChange(val) {
			//页码切换
			this.formInline.currentPageIndex = 1
			this.formInline.currentPageSize = val
			this.getList()
		},
		pageChange(val) {
			//翻页
			this.formInline.currentPageIndex = val
			this.getList()
		},
		getList(_pageIndex) {
			//获取列表
			if (_pageIndex) {
				this.formInline.currentPageIndex = _pageIndex
			}
			this.loading = true
			getNoticeList({
				queryType: 1,
				orgId: this.formInline.orgId || '-1',
				status: this.formInline.status,
				name: this.formInline.name.trim(),
				pageIndex: this.formInline.currentPageIndex - 1,
				pageSize: this.formInline.currentPageSize,
				beginTime:
					this.formInline.time && this.formInline.time.length > 0
						? this.formInline.time[0] + ' 00:00:00'
						: '',
				endTime:
					this.formInline.time && this.formInline.time.length > 0
						? this.formInline.time[1] + ' 23:59:59'
						: '',
			}).then((result) => {
				this.formInline.currentPageTotal = result.total
				// this.staticObj.total = result.total
				this.tableData = result.data
				this.loading = false
			})
		},
		addNotice(index, row) {
			this.dialogFalg = true
			this.editInfo = row || {}
		},
		closeDialog(refresh) {
			this.dialogFalg = false
			if (refresh) {
				this.getData(this.editInfo.id ? '' : 1)
			}
		},
		delNotice(index, row) {
			let that = this
			if (row) {
				that
					.$confirm('确认提前结束吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						roundButton: true,
					})
					.then(() => {
						closeNoticeById({ id: row.id }).then((res) => {
							if (res.status === 200) {
								that.$message({
									type: 'success',
									message: '操作成功!',
								})
								that.getData()
							} else {
								that.$message.error(res.info)
							}
						})
					})
					.catch(() => {})
			}
		},
		showDetail(index, row) {
			//展开详情
			const $table = this.$refs.mainTable
			row.isExpand = !row.isExpand //给row一个自定义展开状态
			$table.toggleRowExpansion(row)
			if (row.isExpand) {
			}
		},
		getStatis() {
			//头部统计
			//this.staticObj = {}
			getNoticeCount({
				orgId: this.formInline.orgId || '-1',
				name: this.formInline.name.trim(),
				status: '-1', //this.formInline.status,
				beginTime:
					this.formInline.time && this.formInline.time.length > 0
						? this.formInline.time[0] + ' 00:00:00'
						: '',
				endTime:
					this.formInline.time && this.formInline.time.length > 0
						? this.formInline.time[1] + ' 23:59:59'
						: '',
			}).then((result) => {
				$.extend(this.staticObj, result.data)
				this.freashStaticFlag++
			})
		},
	},
	watch: {
		handlerStatusSelect(val, oldVal) {
			if (val !== oldVal) {
				this.getList(1)
			}
		},
	},
	computed: {
		handlerStatusSelect() {
			return this.formInline.status
		},
	},
}
</script>
